<template>
  <vue-content-block as="section" :class="$style.ServicesHeroSection">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1112"
      height="600"
      fill="none"
      :class="[$style.bg, 'hidden-p', 'hidden-top']"
    >
      <g clip-rule="evenodd" filter="url(#a)">
        <path
          fill="url(#b)"
          fill-rule="evenodd"
          d="m53.018-289.666-6.66 110.128c-6.66 110.128-19.981 330.384 88.418 350.703 108.399 20.319 338.517-159.3 446.916-138.98C690.091 52.504 676.771 272.76 704.023 426.37c27.253 153.61 95.079 240.575 128.992 284.057l33.913 43.483-182.579 299.91-44.056-26.83c-44.056-26.82-132.169-80.458-220.281-134.1L155.675 731.965-108.663 571.04l-220.281-134.105L-373 410.114l426.018-699.78Z"
        />
        <path
          stroke="#000"
          d="m53.018-289.666-6.66 110.128c-6.66 110.128-19.981 330.384 88.418 350.703 108.399 20.319 338.517-159.3 446.916-138.98C690.091 52.504 676.771 272.76 704.023 426.37c27.253 153.61 95.079 240.575 128.992 284.057l33.913 43.483-182.579 299.91-44.056-26.83c-44.056-26.82-132.169-80.458-220.281-134.1L155.675 731.965-108.663 571.04l-220.281-134.105L-373 410.114l426.018-699.78Z"
        />
      </g>
      <g fill="var(--surface-inverse-high)" stroke="var(--surface-inverse-high)" stroke-width="14.656" filter="url(#c)">
        <rect width="65.953" height="96.96" x="231.479" y="212" rx="32.976" transform="rotate(30 231.479 212)" />
        <rect
          width="65.953"
          height="184.747"
          x="335.459"
          y="238.059"
          rx="32.976"
          transform="rotate(30 335.459 238.059)"
        />
        <rect
          width="65.953"
          height="114.387"
          x="366.256"
          y="391.294"
          rx="32.976"
          transform="rotate(30 366.256 391.294)"
        />
        <rect
          width="65.953"
          height="167.341"
          x="468.972"
          y="213.383"
          rx="32.976"
          transform="rotate(30 468.972 213.383)"
        />
      </g>
      <defs>
        <filter
          id="a"
          width="1500.93"
          height="1537.48"
          x="-389"
          y="-458.666"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="10" dy="-6" />
          <feGaussianBlur stdDeviation="13" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_7726_61312" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="42" dy="-23" />
          <feGaussianBlur stdDeviation="24" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" />
          <feBlend in2="effect1_dropShadow_7726_61312" result="effect2_dropShadow_7726_61312" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="94" dy="-52" />
          <feGaussianBlur stdDeviation="32.5" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend in2="effect2_dropShadow_7726_61312" result="effect3_dropShadow_7726_61312" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="168" dy="-92" />
          <feGaussianBlur stdDeviation="38.5" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0" />
          <feBlend in2="effect3_dropShadow_7726_61312" result="effect4_dropShadow_7726_61312" />
          <feBlend in="SourceGraphic" in2="effect4_dropShadow_7726_61312" result="shape" />
        </filter>
        <filter
          id="c"
          width="359.605"
          height="327.849"
          x="183"
          y="212"
          color-interpolation-filters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="2.198" dy="2.198" />
          <feGaussianBlur stdDeviation="3.664" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
          <feBlend in2="shape" result="effect1_innerShadow_7726_61312" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="9.526" dy="8.794" />
          <feGaussianBlur stdDeviation="6.595" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" />
          <feBlend in2="effect1_innerShadow_7726_61312" result="effect2_innerShadow_7726_61312" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="21.984" dy="20.519" />
          <feGaussianBlur stdDeviation="9.16" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
          <feBlend in2="effect2_innerShadow_7726_61312" result="effect3_innerShadow_7726_61312" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dx="38.839" dy="36.64" />
          <feGaussianBlur stdDeviation="10.626" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0" />
          <feBlend in2="effect3_innerShadow_7726_61312" result="effect4_innerShadow_7726_61312" />
        </filter>
        <linearGradient id="b" x1="601" x2="202" y1="-12" y2="683" gradientUnits="userSpaceOnUse">
          <stop stop-color="#653CC9" />
          <stop offset="1" stop-color="#38216F" />
        </linearGradient>
      </defs>
    </svg>
    <vue-stack
      :space="[32, 32, 64]"
      :padding="['32 16', '32 16', '64 32']"
      :align-x="['start', 'start', 'end']"
      :class="$style.text"
    >
      <vue-text look="hero" weight="black" gradient :align-x="['start', 'start', 'end']">
        {{ $t('ServicesHeroSection.title' /* Transform Your Ideas into Reality with Vuesion Services. */) }}
      </vue-text>
      <vue-text look="large-description" color="text-inverse-high" :align-x="['start', 'start', 'end']">
        {{ $t('ServicesHeroSection.description' /* Expert Consulting, Prototyping, PoCs, and MVP Development. */) }}
      </vue-text>

      <vue-inline space="8">
        <vue-button as="a" href="#contact" look="primary" trailing-icon="mail">
          {{ $t('ServicesHeroSection.cta' /* Get Started Today */) }}
        </vue-button>
        <vue-button as="nuxt-link" to="/" look="secondary" trailing-icon="vuesion"> Vuesion </vue-button>
      </vue-inline>
    </vue-stack>
  </vue-content-block>
</template>

<script setup lang="ts">
import { useCssModule } from 'vue';
import VueContentBlock from '~/components/layout/VueContentBlock/VueContentBlock.vue';
import VueStack from '~/components/layout/VueStack/VueStack.vue';
import VueText from '~/components/typography/VueText/VueText.vue';
import VueButton from '~/components/input-and-actions/VueButton/VueButton.vue';
import VueInline from '~/components/layout/VueInline/VueInline.vue';

// Deps
const $style = useCssModule();
</script>

<style lang="scss" module>
@import 'assets/_design-system.scss';

.ServicesHeroSection {
  position: relative;
  background-color: var(--surface-inverse-high);
  display: flex;
  justify-content: end;

  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .text {
    max-width: 585px;
  }

  .logo {
    position: absolute;
    left: $space-12;
    top: $space-16;
    width: $space-24;
    height: $space-24;
    z-index: 2;
    color: palette-color-level('neutral', 0);
  }

  @include mediaMin(tabletLandscape) {
    height: 600px;
  }
}
</style>
